import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core'
import { JsonApiService } from 'app/core/api/json-api.service' //http请求配置引入
import { config } from '../smartadmin.config'
declare var $: any
@Component({
  selector: 'table-select-date',
  templateUrl: './date-picker.component.html',
  styleUrls: ['./date-picker.component.css']
})
export class datePickerComponent implements OnInit {
  @Input() initSelectDay: number = 1 // 初始默认选择的天数 init 时间选择组件是否会使用，然后触发选择时间的事件
  @Input() notStart: boolean // 条件为true 时不显示起始时间
  @Input() notEnd: boolean // 条件为true 时不显示结束时间
  @Input() minDay: boolean // 条件为true 时选择最小时间单位:天
  @Input() notInit: boolean // 条件为true 时不初始化时间
  @Input() fullWidth: boolean // 条件为true 时时间选择框宽度占父级百分百  适用于添加编辑页面
  @Input() specifyId: any // 指定选择时间的Id
  @Input() specifyTime: any // 指定选择时间的初始化时间 ngOnChanges 中触发，需要改变值
  @Input() isBeforeToday: any = false // 是否只能选择今天以前的日期
  @Input() startTimePlaceholder: any = '选择开始时间' // 开始时间的placeholder
  @Input() endTimePlaceholder: any = '选择结束时间' // 结束时间的placeholder
  @Output() private outerTime = new EventEmitter()
  startTime: string = ''
  endTime: string = ''
  pickerId = {
    picker1: 'datetimepicker1',
    picker2: 'datetimepicker2'
  }
  constructor(private jsonApiService: JsonApiService) {}
  ngOnChanges() {
    // 绑定值改变后才触发的
    if (this.specifyTime && this.specifyTime.startTime && this.specifyTime.endTime) {
      this.startTime = this.specifyTime.startTime
      this.endTime = this.specifyTime.endTime
      $('#' + this.pickerId.picker1).val(this.startTime)
      $('#' + this.pickerId.picker2).val(this.endTime)
      this.sendParent()
    }
  }
  getInputValue() {
    if (this.startTime && this.endTime) {
      let timeCheck = common.correctTimeParams(this.startTime, this.endTime, 0)
      if (!timeCheck.status) {
        this.startTime = $('#' + this.pickerId.picker1).val()
        this.endTime = $('#' + this.pickerId.picker2).val()
        this.sendParent()
        return
      }
    }
  }
  ngOnInit() {
    if (this.specifyId) {
      if (this.pickerId.picker1) {
        this.pickerId.picker1 = this.specifyId.picker1
        this.pickerId.picker2 = this.specifyId.picker2
      }
    }
    this.initDate()
  }
  //将时间传递给父组件
  sendParent() {
    let startEndTime = {
      startTime: this.startTime,
      endTime: this.endTime
    }
    this.outerTime.emit(startEndTime)
  }
  //删除所选时间
  del_date() {
    this.startTime = ''
    this.endTime = ''
    $('#' + this.pickerId.picker1)
      .val('')
      .change()
    $('#' + this.pickerId.picker2)
      .val('')
      .change()
    $('#' + this.pickerId.picker2).datetimepicker('setStartDate', null)
    $('#' + this.pickerId.picker1).datetimepicker('setEndDate', null)
    this.sendParent()
  }
  //获取对应的时间格式
  getTimeFormat(val) {
    let time = common.getTimeMmss(val)
    if (this.minDay) time = common.getTimeDay(val)
    return time
  }
  initDate() {
    let that = this
    System.import('assets/js/datepicker/js/bootstrap-datetimepicker.min.js').then(() => {
      System.import('assets/js/datepicker/locales/bootstrap-datetimepicker.zh-CN.js').then(() => {
        let pickerConfig: any = {
          format: 'yyyy-mm-dd hh:ii:ss',
          language: 'zh-CN',
          autoclose: true
        }
        if (that.minDay) {
          pickerConfig.format = 'yyyy-mm-dd'
          pickerConfig.minView = 2
        }
        if (that.isBeforeToday) {
          pickerConfig.endDate = new Date()
        }
        let dateTimePicker1 = $('#' + this.pickerId.picker1)
        let dateTimePicker2 = $('#' + this.pickerId.picker2)
        dateTimePicker1.datetimepicker(pickerConfig).on('changeDate', function (e) {
          that.startTime = that.getTimeFormat(e.date)
          dateTimePicker2.datetimepicker('setStartDate', that.startTime)
          that.sendParent()
        })
        dateTimePicker2.datetimepicker(pickerConfig).on('changeDate', function (e) {
          that.endTime = that.getTimeFormat(e.date)
          dateTimePicker1.datetimepicker('setEndDate', that.endTime)
          that.sendParent()
        })
        //当插件自动赋值的时候重新获取输入框的起始结束时间
        dateTimePicker1.datetimepicker().on('hide', function () {
          that.getInputValue()
        })
        dateTimePicker2.datetimepicker().on('hide', function () {
          that.getInputValue()
        })
        if (!that.notInit) {
          let nowTime = new Date()
          if (!that.notEnd) {
            that.endTime = that.getTimeFormat(nowTime)
            dateTimePicker2.val(that.endTime) //当前时间
          }
          if (!that.notStart) {
            if (that.initSelectDay <= 0) {
              that.initSelectDay = 1
            }
            nowTime.setDate(nowTime.getDate() - that.initSelectDay)
            dateTimePicker1.val(that.getTimeFormat(nowTime))
            that.startTime = that.getTimeFormat(nowTime)
          }
          that.sendParent()
        }
      })
    })
  }
}
